<template>
  <div class="template-editor">
    <div class="editor-header">
      <h2>试卷模板编辑</h2>
      <div class="header-actions">
        <el-button @click="saveTemplate" type="primary" :loading="saving">
          保存模板
        </el-button>
        <el-button @click="previewTemplate">
          预览模板
        </el-button>
      </div>
    </div>

    <el-row :gutter="20">
      <!-- 左侧配置面板 -->
      <el-col :span="8">
        <el-card class="config-card">
          <template #header>
            <h3>模板配置</h3>
          </template>

          <el-form :model="templateConfig" label-width="100px">
            <el-form-item label="模板名称">
              <el-input v-model="templateConfig.name" placeholder="请输入模板名称" />
            </el-form-item>
            <el-form-item label="模板描述">
              <el-input
                v-model="templateConfig.description"
                type="textarea"
                :rows="3"
                placeholder="请输入模板描述"
              />
            </el-form-item>
            <el-form-item label="试卷标题">
              <el-input v-model="templateConfig.title" placeholder="请输入试卷标题" />
            </el-form-item>
            <el-form-item label="页面设置">
              <el-form-item label="页边距">
                <el-input-number v-model="templateConfig.margin" :min="10" :max="50" />
              </el-form-item>
              <el-form-item label="字体大小">
                <el-input-number v-model="templateConfig.fontSize" :min="12" :max="18" />
              </el-form-item>
              <el-form-item label="行间距">
                <el-input-number v-model="templateConfig.lineHeight" :min="1" :max="2" step="0.1" />
              </el-form-item>
            </el-form-item>
            <el-form-item label="题目布局">
              <el-radio-group v-model="templateConfig.questionLayout">
                <el-radio value="vertical">垂直排列</el-radio>
                <el-radio value="horizontal">水平排列</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="显示选项">
              <el-checkbox-group v-model="templateConfig.displayOptions">
                <el-checkbox value="score">显示分数</el-checkbox>
                <el-checkbox value="time">显示时间限制</el-checkbox>
                <el-checkbox value="instructions">显示答题说明</el-checkbox>
                <el-checkbox value="footer">显示页脚</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>

      <!-- 右侧预览区域 -->
      <el-col :span="16">
        <el-card class="preview-card">
          <template #header>
            <h3>模板预览</h3>
          </template>

          <div class="template-preview" :style="previewStyles">
            <div class="template-header">
              <h1 class="template-title">{{ templateConfig.title || '试卷标题' }}</h1>
              <div v-if="templateConfig.displayOptions.includes('time')" class="template-time">
                时间限制：120分钟
              </div>
            </div>

            <div v-if="templateConfig.displayOptions.includes('instructions')" class="template-instructions">
              <h3>答题说明：</h3>
              <p>1. 请认真阅读题目，按要求作答</p>
              <p>2. 答案请写在指定位置</p>
              <p>3. 考试结束后请立即交卷</p>
            </div>

            <div class="template-content">
              <div class="question-section">
                <h3>一、选择题（共20题，每题2分）</h3>
                <div v-for="i in 3" :key="i" class="question-item" :class="templateConfig.questionLayout">
                  <span class="question-number">{{ i }}.</span>
                  <span class="question-text">这是一道示例选择题，用于展示模板布局效果。请选择正确的答案：</span>
                  <div class="question-options">
                    <div>A. 选项A</div>
                    <div>B. 选项B</div>
                    <div>C. 选项C</div>
                    <div>D. 选项D</div>
                  </div>
                </div>
              </div>

              <div class="question-section">
                <h3>二、填空题（共10题，每题2分）</h3>
                <div v-for="i in 2" :key="i" class="question-item">
                  <span class="question-number">{{ i + 3 }}.</span>
                  <span class="question-text">这是一道填空题，请在横线上填写正确答案：__________。</span>
                </div>
              </div>
            </div>

            <div v-if="templateConfig.displayOptions.includes('footer')" class="template-footer">
              <p>第 1 页，共 5 页</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const saving = ref(false)
const templateConfig = reactive({
  name: '',
  description: '',
  title: '期中考试试卷',
  margin: 20,
  fontSize: 14,
  lineHeight: 1.5,
  questionLayout: 'vertical',
  displayOptions: ['score', 'instructions']
})

// 预览样式
const previewStyles = computed(() => ({
  padding: `${templateConfig.margin}px`,
  fontSize: `${templateConfig.fontSize}px`,
  lineHeight: templateConfig.lineHeight
}))

// 保存模板
const saveTemplate = async () => {
  if (!templateConfig.name) {
    ElMessage.warning('请输入模板名称')
    return
  }

  saving.value = true
  try {
    // TODO: 实现保存模板的API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('模板保存成功')
  } catch (error) {
    console.error('保存模板失败:', error)
    ElMessage.error('保存模板失败')
  } finally {
    saving.value = false
  }
}

// 预览模板
const previewTemplate = () => {
  // TODO: 实现模板预览功能
  ElMessage.info('模板预览功能开发中')
}
</script>

<style scoped lang="scss">
.template-editor {
  padding: 20px;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h2 {
    margin: 0;
    color: #303133;
  }
}

.config-card {
  h3 {
    margin: 0;
    color: #303133;
  }
}

.preview-card {
  h3 {
    margin: 0;
    color: #303133;
  }
}

.template-preview {
  background: white;
  min-height: 600px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;

  .template-header {
    text-align: center;
    margin-bottom: 30px;

    .template-title {
      margin: 0 0 10px 0;
      font-size: 20px;
      font-weight: bold;
    }

    .template-time {
      color: #606266;
      font-size: 14px;
    }
  }

  .template-instructions {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 30px;

    h3 {
      margin: 0 0 10px 0;
      font-size: 16px;
    }

    p {
      margin: 5px 0;
      color: #606266;
    }
  }

  .template-content {
    .question-section {
      margin-bottom: 30px;

      h3 {
        margin: 0 0 15px 0;
        font-size: 16px;
        font-weight: bold;
      }
    }

    .question-item {
      margin-bottom: 15px;

      &.horizontal {
        display: flex;
        align-items: flex-start;
        gap: 10px;

        .question-text {
          flex: 1;
        }
      }

      .question-number {
        font-weight: bold;
        margin-right: 8px;
      }

      .question-options {
        margin-left: 25px;
        margin-top: 8px;

        div {
          margin: 5px 0;
        }
      }
    }
  }

  .template-footer {
    text-align: center;
    margin-top: 50px;
    color: #909399;
    font-size: 12px;
  }
}
</style>